<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">编辑</div>
      <div class="ef-node-form-body">
        <el-form
          :model="node"
          ref="dataForm"
          label-width="80px"
          v-show="type === 'node'"
        >
          <el-form-item label="类型">
            <el-input v-model="node.type" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="left坐标">
            <el-input v-model="node.left" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="top坐标">
            <el-input v-model="node.top" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="ico图标">
            <el-input v-model="node.ico" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="node.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="node.state" placeholder="请选择">
              <el-option
                v-for="item in stateList"
                :key="item.state"
                :label="item.label"
                :value="item.state"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模型类型">
            <el-select v-model="node.modelId" placeholder="请选择">
              <el-option
                v-for="item in modelList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="拖拽">
            <el-switch
              v-model="node.viewOnly"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="save"
              >保存</el-button
            >
          </el-form-item>
        </el-form>

        <el-form
          :model="line"
          ref="dataForm"
          label-width="80px"
          v-show="type === 'line'"
        >
          <el-form-item label="名称">
            <el-input v-model="line.label"></el-input>
          </el-form-item>
          <el-form-item label="选择项目">
            <el-select v-model="line.projectId" placeholder="请选择">
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              v-model="line.startTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              v-model="line.endTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="saveLine"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!--            <div class="el-node-form-tag"></div>-->
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";

export default {
  data() {
    return {
      visible: true,
      // node 或 line
      type: "node",
      node: {},
      line: {
        label: "",
        startTime: "",
        endTime: "",
        projectId: "",
      },
      data: {},
      stateList: [
        {
          state: "success",
          label: "成功",
        },
        {
          state: "warning",
          label: "警告",
        },
        {
          state: "error",
          label: "错误",
        },
        {
          state: "running",
          label: "运行中",
        },
      ],
      modelList: [
        {
          id: 1,
          label: "新安江模型",
        },
        {
          id: 2,
          label: "兴隆模型",
        },
        {
          id: 3,
          label: "API模型",
        },
        {
          id: 4,
          label: "预报模型",
        },
        {
          id: 5,
          label: "预警模型",
        },

        {
          id: 6,
          label: "其他模型",
        },
      ],
      projectList: [
        {
          id: 1,
          label: "项目-新安江",
        },
        {
          id: 2,
          label: "项目-兴隆",
        },
        {
          id: 3,
          label: "项目-API",
        },
        {
          id: 4,
          label: "项目-其他",
        },
      ],
    };
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id) {
      this.type = "node";
      this.data = data;
      data.nodeList.filter((node) => {
        if (node.id === id) {
          this.node = cloneDeep(node);
        }
      });
    },
    lineInit(line) {
      // console.log(line);
      this.type = "line";
      // this.line = line;
      //筛选
      const filteredData = line.data.filter((item) => {
        if (item.from === line.from && item.to === line.to) {
          return (
            item.startTime, item.endTime, item.projectId, item.from, item.to
          );
        }
      });
      // console.log(filteredData);
      //参数赋值
      if (filteredData.length != 0) {
        this.line.from = filteredData[0].from;
        this.line.to = filteredData[0].to;
        this.line.label = filteredData[0].label;
        this.line.startTime = filteredData[0].startTime;
        this.line.endTime = filteredData[0].endTime;
        this.line.projectId = filteredData[0].projectId;
      }
      // console.log(this.line);
    },
    // 修改连线
    saveLine() {
      // console.log(this.line);
      this.$emit("setLineLabel", this.line.from, this.line.to, this.line);
    },
    //保存节点
    save() {
      this.data.nodeList.filter((node) => {
        if (node.id === this.node.id) {
          node.name = this.node.name;
          node.left = this.node.left;
          node.top = this.node.top;
          node.ico = this.node.ico;
          node.state = this.node.state;
          node.modelId = this.node.modelId;
          //   node.viewOnly = this.node.viewOnly;
          this.$emit("repaintEverything");
        }
      });
    },
  },
};
</script>

<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  background-color: #fbfbfb;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}
</style>
